<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
	<jsp:include page="../../views/include/head.jsp"/>
</head>
<body>
<jsp:include page="../../views/include/header.jsp"/>
<div class="row">
<div class="maincontainer">
<div class="container2">
	<div class="row">
	<h2 style="color:#D71A5E; padding-left:15px;">Conference Registration</h2>
	</div>
	<img style="width: 770px;" src="img/personal-details.png">
	<sf:form modelAttribute="registerObj" role="form">
	<div class="container3">
	<div class="row">
		<div class="form-group col-md-4 col-sm-4">
			<label for="salutation">Salutation</label>
			<sf:select path="salutation" cssClass="selectpicker form-control">
				<sf:option value="">--Select--</sf:option>
				<sf:option value="Mr">Mr</sf:option>
				<sf:option value="Ms">Ms</sf:option>
				<sf:option value="Mrs">Mrs</sf:option>
				<sf:option value="Dr">Dr</sf:option>
				<sf:option value="Prof">Prof</sf:option>
			</sf:select>
			<sf:errors path="salutation" cssClass="error"/>
		</div>
		<div class="form-group col-md-8 col-sm-8">
			<label for="name">Full Name</label>
			<sf:input path="name" placeholder="Enter Full Name" class="form-control" type="text" required="true"/>
			<sf:errors path="name" cssClass="error"/>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-4 col-sm-4">
			<label for="nric">NRIC No</label>
			<sf:input path="nric" placeholder="Enter NRIC" class="form-control" type="text" required="true"/>
			<sf:errors path="nric" cssClass="error"/>
		</div>
		<div class="form-group col-md-8 col-sm-8">
			<label for="badgeName">Name On Badge (Up to 20 letters)</label>
			<sf:input path="badgeName" placeholder="Enter name on badge" class="form-control" type="text" maxlength="20" required="true"/>
			<sf:errors path="badgeName" cssClass="error"/>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-6 col-sm-6">
			<label for="designation">Job Title / Designation</label>
			<sf:input path="designation" placeholder="Enter Designation" class="form-control" type="text" required="true"/>
			<sf:errors path="designation" cssClass="error"/>
		</div>
		<div class="form-group col-md-6 col-sm-6">
			<label for="company">Preschool / Organization</label>
			<sf:input path="company" placeholder="Enter Preschool / Organization" class="form-control" type="text" required="true"/>
			<sf:errors path="company" cssClass="error"/>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-6 col-sm-6">
			<label for="mobile">Mobile Number (For SMS Notification)</label>
			<sf:input path="mobile" placeholder="Enter Mobile Number" class="form-control" type="tel" maxlength="8" required="true"/>
			<sf:errors path="mobile" cssClass="error"/>
		</div>
		<div class="form-group col-md-6 col-sm-6">
			<label for="officeNo">Office Number</label>
			<sf:input path="officeNo" placeholder="Enter Office Number" class="form-control" type="tel" maxlength="8"/>
			<sf:errors path="officeNo" cssClass="error"/>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-8 col-sm-8">
			<label for="email">Email Address</label>
			<sf:input path="email" placeholder="Enter Email" class="form-control" type="email" required="true"/>
			<sf:errors path="email" cssClass="error"/>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-8 col-sm-8">
			<label for="address">Mailing Address</label>
			<sf:input path="address" placeholder="Enter Mailing Address" class="form-control" type="text" required="true"/>
			<sf:errors path="address" cssClass="error"/>
		</div>
		<div class="form-group col-md-4 col-sm-4">
			<label for="postalCode">Postal Code</label>
			<sf:input path="postalCode" placeholder="Postal Code" class="form-control" type="text" maxlength="6" required="true"/>
			<sf:errors path="postalCode" cssClass="error"/>
		</div>
	</div>
	<div class="row">
		<div class="form-group col-md-9 col-sm-9">
			Would you like to opt for the vegetarian bento box? &nbsp;&nbsp;
			<div class="radio-inline"><sf:radiobutton path="vegetarian" value="1" label="Yes" required="true"/></div>
			<div class="radio-inline"><sf:radiobutton path="vegetarian" value="0" label="No" required="true"/></div>
			<sf:errors path="vegetarian" cssClass="error"/>
		</div>
	</div>
	</div>
	<div class="row">
	</div>
	<br><br>
	<div class="container4">
	<div class="row">
		<img style="width: 770px;" src="img/choice.png">
		<div class="panel-group" id="accordion">
			<div class="panel panel-default">
				<div class="panel-heading">
				<h4 class="panel-title">
			        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
			          <img src="img/arrow.png">&nbsp; Concurrent Session A - 20 Nov 2013 (1.30pm - 3.00pm) <sf:errors path="sessionA" cssClass="error"/>
			        </a>
			      </h4>
				</div>
				<div id="collapseOne" class="panel-collapse collapse">
					<div class="panel-body">
						<c:forEach items="${sessionList}" var="ses" varStatus="sesStatus">
						<c:if test="${ses.type eq 1}">
							<div class="radio">
							<sf:radiobutton path="sessionA" value="${ses.no}" label="A${ses.no} - ${ses.name}${registerCountObj.sessionA[ses.no] ge ses.capacity?' - FULL':''}" disabled="${registerCountObj.sessionA[ses.no] ge ses.capacity}"/>
							</div>
						</c:if>
						</c:forEach>
						<div class="radio"><sf:radiobutton path="sessionA" value="0" label="Not attending"/></div>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
				<h4 class="panel-title">
			        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
			          <img src="img/arrow.png">&nbsp; Concurrent Session B - 20 Nov 2013 (3.45pm - 5.15pm) <sf:errors path="sessionB" cssClass="error"/>
			        </a>
			      </h4>
				</div>
				<div id="collapseTwo" class="panel-collapse collapse">
					<div class="panel-body">
						<c:forEach items="${sessionList}" var="ses" varStatus="sesStatus">
						<c:if test="${ses.type eq 2}">
							<div class="radio">
							<sf:radiobutton path="sessionB" value="${ses.no}" label="B${ses.no} - ${ses.name}${registerCountObj.sessionB[ses.no] ge ses.capacity?' - FULL':''}" disabled="${registerCountObj.sessionB[ses.no] ge ses.capacity}"/>
							</div>
						</c:if>
						</c:forEach>
						<div class="radio"><sf:radiobutton path="sessionB" value="0" label="Not attending"/></div>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
				<h4 class="panel-title">
			        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
			          <img src="img/arrow.png">&nbsp; Concurrent Session C - 21 Nov 2013 (11.15am - 12.45pm) <sf:errors path="sessionC" cssClass="error"/>
			        </a>
			      </h4>
				</div>
				<div id="collapseThree" class="panel-collapse collapse">
					<div class="panel-body">
						<c:forEach items="${sessionList}" var="ses" varStatus="sesStatus">
						<c:if test="${ses.type eq 3}">
							<div class="radio">
							<sf:radiobutton path="sessionC" value="${ses.no}" label="C${ses.no} - ${ses.name}${registerCountObj.sessionC[ses.no] ge ses.capacity?' - FULL':''}" disabled="${registerCountObj.sessionC[ses.no] ge ses.capacity}"/>
							</div>
						</c:if>
						</c:forEach>
						<div class="radio"><sf:radiobutton path="sessionC" value="0" label="Not attending"/></div>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
				<h4 class="panel-title">
			        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
			          <img src="img/arrow.png">&nbsp; Concurrent Session D - 21 Nov 2013 (2.30pm - 4.00pm) <sf:errors path="sessionD" cssClass="error"/>
			        </a>
			      </h4>
				</div>
				<div id="collapseFour" class="panel-collapse collapse">
					<div class="panel-body">
						<c:forEach items="${sessionList}" var="ses" varStatus="sesStatus">
						<c:if test="${ses.type eq 4}">
							<div class="radio">
							<sf:radiobutton path="sessionD" value="${ses.no}" label="D${ses.no} - ${ses.name}${registerCountObj.sessionD[ses.no] ge ses.capacity?' - FULL':''}" disabled="${registerCountObj.sessionD[ses.no] ge ses.capacity}"/>
							</div>
						</c:if>
						</c:forEach>
						<div class="radio"><sf:radiobutton path="sessionD" value="0" label="Not attending"/></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	<br>
	<div class="row" style="color:black; padding-left:270px;">
		<input type="reset" value="Reset" class="btn btn-lg btn-default2"/>
		<input type="submit" name="_eventId_next" value="Proceed to Payment" class="btn btn-lg btn-default2"/>
		<input type="submit" name="_eventId_add" value="Add Participant" class="btn btn-lg btn-default2" ${registerObj.participantCount lt 19?'':'disabled="disabled"'}/><br> (You may add up to ${19-registerObj.participantCount} more)
		<input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey}" />
	</div>

	</sf:form>
						<br><br>

</div>
</div>
</div> <!-- /container -->
</div>
<jsp:include page="../../views/include/bottombody.jsp"/>
</body>
</html>